<template>
  <s-box title="技术发展趋势" ref="loading">
    <div class="trend-time"  slot="header" ref="loading">
      <DatePicker v-model="rangeDataStart" type="year" placeholder="开始" style="width: 100px" @on-change="change"></DatePicker>
      <DatePicker v-model="rangeDataEnd" type="year" placeholder="结束" style="width: 100px" @on-change="change"></DatePicker>
      <!-- <DatePicker v-model="rangeData" @on-change="change"  type="daterange" split-panels placeholder="选择区间" style="width: 200px"></DatePicker> -->
    </div>
    <div class="chart-box">
        <div class="chart-wrap" ref="chart"></div>
    </div>
  </s-box>
</template>
<script>
import delegate from "../js/event.js";
import echarts from "echarts";
import data2 from "./guanxi.json";
import mixin from '../js/mixin.js';
export default {
  mixins:[mixin],
  data() {
    let rangeDate = [new Date( (new Date().getFullYear() - 7) + '' ),new Date( new Date().getFullYear() + '' )];
    return {
      rangeDataStart: rangeDate[0],
      rangeDataEnd: rangeDate[1],
      years:[],
      articleNums:[],
      paperNums:[],
      patentNums:[],
      data2
    };
  },
  mounted() {
    this._initMethod();
  },
  beforeDestroy(){
         // 解除事件绑定
        delegate.$off('s-resize',this._initChart)
        delegate.$off('s-search',this._search)
  },
  methods: {
    _initMethod() {
      delegate.$on("s-search", this._search);
      delegate.$on('s-resize',this._initChart)
    },
    _search(){

    },
    change(){
       this._initChart();
    },
    _setChartOption(){
          let myChart = echarts.init(this.$refs.chart);
          myChart.setOption({
          legend:{
              top:'4%',
              left:0,
              data:[
                  {
                    name:'论文',
                    icon: 'circle',
                    textStyle: {
                        color: '#98caec'
                    }
                  },
                  {
                    name:'专利',
                    icon: 'circle',
                    textStyle: {
                        color: '#98caec'
                    }
                  },
                  {
                    name:'新闻动态',
                    icon: 'circle',
                    textStyle: {
                        color: '#98caec'
                    }
                  }],
          },
          color:['#f59f00','#0066ff', '#2e9e84'],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: "13",
            right: "13",
            top: "23%",
            bottom: "13",
            containLabel: true
          },
          xAxis: {
            type: "category",
            data: this.years,
            interval: 10,
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#98caec", //分割线颜色

              }
            },
            axisLine: {
              lineStyle: {
                color: "#7d8db9", //坐标轴线颜色
                width: 1
              }
            },
            axisLabel: {
              color: "#98caec" //坐标轴名称颜色
            }
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#054e76", //分割线颜色
                show:false,
              }
            },
            axisLine: {
              show:false,
              lineStyle: {
                color: "#98caec", //坐标轴线颜色
                width: 1,

              }
            },
            axisLabel: {
              color: "#a1d6f8" //坐标轴名称颜色
            }
          },
          series: [
            {
              name:'论文',
              //data: [500,700,800,1000,700,900,1400,1200,700,600,550,1100],
              data: this.paperNums,
              type: "line",
              itemStyle: {
              },
              lineStyle: {
              }
            },
             {
              name:'专利',
              //data: [330,560,780,1100,1400,200,280,1100,500,240,1120,210],
              data: this.patentNums,
              type: "line",
              itemStyle: {
              },
              lineStyle: {
              }
            },
             {
              name:'新闻动态',
              //data: [150,100,901,934,1290,1330,1320,400,60,800,100,120],
              data: this.articleNums,
              type: "line",
              itemStyle: {
              },
              lineStyle: {
              }
            }

          ]
        });
    },
    _getTechDevelopTrends(){
        if(!this.navCurrentId) return;
        this.api({
                url: "newtechanalyse/technologyDevelopmentTrends",
                method: "post",
                data:`topicId=${this.navCurrentId}&startDate=${new Date(this.rangeDataStart).getFullYear()}-01-01&endDate=${new Date(this.rangeDataEnd).getFullYear()}-12-31`
        }).then(data => {
            this.$refs.loading.hide();
            this.years=data.years;
            this.articleNums=data.articleNum;
            this.paperNums=data.paperNum;
            this.patentNums=data.patentNum;
            this._setChartOption();
        }).catch((error) =>{ this.$refs.loading.hide()})
    },
    _initChart() {
      this.$refs.loading.show();
      this.$nextTick(()=>{
         this._getTechDevelopTrends();
      })
    }
  }
};
</script>
<style lang="scss" scoped>
  .chart-box{
      position: relative;
      padding-top: 57.7%;
  }
  .chart-wrap{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
  }
</style>
